import React from 'react';
import { HashRouter, Route, Link, Redirect } from 'react-router-dom';

const Home = props => <h1>{props.msg}</h1>;
const Movie = ({ match }) => (
  <h1>
    {match.params.type}-{match.params.id}
  </h1>
);
const About = props => <h1>{props.msg}</h1>;

class App extends React.Component {
  render() {
    return (
      <HashRouter>
        <h1>这是 App 根组件 </h1>
        <Redirect to='/home' />
        <Link to='/home'>首页</Link>&nbsp;
        <Link to='/movie/top250/102'>电影</Link>&nbsp;
        <Link to='/about'>关于</Link>
        <Route
          path='/home'
          component={Home}
        />
        <Route
          path='/movie/:type/:id'
          component={Movie}
          exact
        />
        <Route
          path='/about'
          component={About}
        />
        {this.props.children}
      </HashRouter>
    );
  }
}

export default App;